<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>VUE版本myorder</title>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/weui.css">
  <link rel="stylesheet" href="css/jquery-weui.css">
  <link rel="stylesheet" href="css/common.css">
</head>
<style>
body {
  background: #ccc;
}

.order-icon {
  background: #fff;
}

.weui-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weui-flex>.weui-flex__item {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}



.order-list {
  display: flex;
  padding: 10px 0;
  /*border-bottom:10px solid #ccc;*/
  border-top: 15px solid #ccc;
  flex-direction: column;
  margin-bottom: 10px;
}

.order-state {
  /*flex:1;*/
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

.order-state>span:nth-child(2) {
  float: right;
  color: red;
}

.order-wrapper {
  display: flex;
}

.order-img {
  flex: 1;
}

.order-content {
  flex: 4;
  padding-left: 15px;
}

.order-num {
  background: red;
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  transform: translateY(-50%);
}

.order-icon {
  padding: 20px 0 10px 0;
}

ul,
li {
  list-style: none;
}

.user-phone {
  float: right;
  margin-right: 20px;
  font-size: 16px;
}

.active {
  color: #0066CC;
}
</style>

<body>
  <div class="firstPage">
    <div class="weui-flex order-icon">
      <div class="weui-flex__item" data-state='1'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>待派件</p>
      </div>
      <div class="weui-flex__item" data-state='2'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>预约成功</p>
      </div>
      <div class="weui-flex__item" data-state='3'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i><span class='order-num'>1</span></div>
        <p>维修中</p>
      </div>
      <div class="weui-flex__item" data-state='4'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>待评价</p>
      </div>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd " id='myOrder' >
        <!-- <router-link to='/detail'> -->
        <div class="link-wraper" v-on:click='goDetail'>
        <router-link :to="'/foo/' + item.id" v-for="item in msg" v-show='listShow' v-on:click='goDetail(item.id)' class="order-list" :data-orderId='item.id'>
          <p class="order-state"><span>{{item.createDate|dateChange}}</span><span> {{item.orderStatus}} </span></p>
          <div class="order-wrapper">
            <div class="weui-media-box__bd order-content">
              <h4 class="weui-media-box__title">{{item.questionOne}} </h4>
              <p class="weui-media-box__desc">{{item.describe}}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <router-view></router-view>
      </div>
      <!-- VUE END -->
    </div>
  </div>
  </div>
  <!-- <div class="secondPage"> -->
  <!-- </div> -->
  <template id='detail'>
    <div>ID{{$route.params.id}}
      <div class='detail-content'>
        <div class='weui-cells'>
          <div class='weui-cell'>
            订单编号: <span class='order-number'>data.orderNumber</span><span class='order-state'></span>
          </div>
          <div class='weui-cell'>
            <p>
              <span>data.questionOne+</span><span>data.questionTwo</span><span>"+data.questionThree</span>"+
            </p>
          </div>
          <div class='weui-cell'>
            <ul class='img-list'>
              <li><img :src='message.rapairPicUrls' alt=''></li>
            </ul>
          </div>
          <div class='weui-cell'>
            <div class='weui-cell__bd'>data.describe</div>
          </div>
        </div>
        <div class='weui-cells'>
          <div class='weui-cell'>
            <div class='weui-cell__hd'>
              <i class='fa icon-map-marker'></i>
            </div>
            <div class='weui-cell__bd'>
              <p>
                <span class='user-name'>data.userName</span><span class='user-phone'>12345678909</span>
              </p>
              <p class='user-local'>data.city+data.area+data.buildingName+data.buildingStage+data.buildingNum+data.buildingHouseNum</p>
            </div>
          </div>
        </div>
        <div class='weui-cells'>
          <div href='javascript:void(0);' class='weui-cell'>
            <div class='weui-cell__hd order-img'>
              <img class='weui-media-box__thumb' src='img/icon.png' alt=''>
            </div>
            <div class='weui-cell__bd order-content'>
              <h4 class=''>"+technician.userName+"<span class='user-phone'>"+technician.cellphone+"</span></h4>
              <p>XX公司</p>
            </div>
          </div>
        </div>
      </div>
      <a href=rate.html#>
        <button class='weui-btn weui-btn_primary'>评价</button>
      </a>
    </div>
  </template>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<!-- <script src='js/myorder.js'></script> -->
<script src='js/vue.js'></script>
<script src='js/vue-resource.js'></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src='js/vue-myorder.js'></script>

</html>
